<template>
  <div class='check-module-container'>
    <el-form :model="requestParam"
             label-width="100px">
      <el-row class="request-header dm-form">
        <el-col :lg="{span:3}"
                :md="{span:3}"
                :sm="{span:5}"
                :xs="{span:24}">
          <el-button @click="editModule('create',{})"
                     type="primary">添加检查模块</el-button>
        </el-col>

        <el-col :lg="{span:12,offset:4}"
                :md="{span:12,offset:3}"
                :sm="{span:10,offset:1}"
                :xs="{span:24}"
                class="align-right">
          <el-form-item prop="module_name"
                        label="检查模块名称">
            <el-input v-model="requestParam.module_name"
                      placeholder="请输入检查模块名称"></el-input>
          </el-form-item>

        </el-col>
        <el-col :lg="{span:4,offset:1}"
                :md="{span:6}"
                :sm="{span:8}"
                :xs="{span:24}"
                class="flex-end">
          <el-button @click="search"
                     type="primary">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :header-cell-style="{background:'#f5f5f5'}"
              height="600"
              :data="checkModuleList.list">
      <el-table-column type="index"
                       label="序号">
      </el-table-column>
      <el-table-column prop="module_name"
                       label="检查模块名称">
      </el-table-column>
      <el-table-column prop="operate_name"
                       label="操作人员">
      </el-table-column>
      <el-table-column prop="operate_time"
                       label="操作时间">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="configCheckModule(scope.row)">配置</el-button>
          <el-button @click="editModule('update',scope.row)"
                     type="text">修改</el-button>
          <el-button @click="deleteModule(scope.row)"
                     type="text">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination @current-change="handlePageChange"
                   @size-change="handleSizeChange"
                   :current-page="requestParam.page"
                   :page-size="requestParam.page_size"
                   layout="total,sizes,prev, pager, next, jumper"
                   background
                   :total="checkModuleList.total_count"
                   align="center">
    </el-pagination>
    <EditCheckModuleDialog :dialogVisible.sync="editModuleDialogVisible"
                           :dialogStatus="editModuleDialogStatus"
                           :dialogForm="editModuleDialogForm"
                           @callback="editModuleCb"></EditCheckModuleDialog>
  </div>
</template>
<script>
import EditCheckModuleDialog from './components/EditCheckModuleDialog'
import { CommonCheckApi } from '@/services/SystemSetting'
export default {
  data () {
    return {
      // 请求检查模块列表参数
      requestParam: {
        module_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      resetParam: {
        module_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      // 检查模块列表
      checkModuleList: {
        list: [],
        page: 1,
        total_count: 10
      },
      // 编辑检查模块弹框是否可见
      editModuleDialogVisible: false,
      // 编辑检查模块弹框状态
      editModuleDialogStatus: 'create',
      // 编辑检查模块弹框数据对象
      editModuleDialogForm: {

      }
    }
  },
  components: {
    EditCheckModuleDialog
  },
  methods: {
    handleSizeChange (size) {
      this.requestParam.page_size = size
      this.requestParam.page = 1
      this.getCheckModuleList()
    },
    handlePageChange (page) {
      this.requestParam.page = page
      this.getCheckModuleList()
    },
    search () {
      this.requestParam.page = 1
      this.getCheckModuleList()
    },
    reset () {
      let reset = JSON.parse(JSON.stringify(this.resetParam))
      this.requestParam = Object.assign(this.requestParam, reset)
      this.getCheckModuleList()
    },
    // 获取检查模块列表
    getCheckModuleList () {
      CommonCheckApi.getCheckModuleList({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.checkModuleList = res.data
        }
      })
    },
    // 编辑检查模块
    editModule (type, data) {
      this.editModuleDialogStatus = type
      this.editModuleDialogForm = data
      this.editModuleDialogVisible = true
    },
    // 编辑检查模块回调
    editModuleCb () {
      this.getCheckModuleList()
    },
    // 删除检查模块确认
    deleteModule (item) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteModuleApi(item.check_module_id)
        })
        .catch(() => {

        })
    },
    // 删除检查模块api
    deleteModuleApi (id) {
      CommonCheckApi.deleteCheckModule({
        data: {
          check_module_id: id
        }
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('删除检查模块成功')
          this.getCheckModuleList()
        }
      })
    },
    // 配置检查模块
    configCheckModule (row) {
      this.$router.push({
        path: '/configCheckModule',
        query: {
          id: row.check_module_id
        }
      })
    }
  },
  created () {
    this.getCheckModuleList()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.check-module-container {
  padding: 20px;

  .el-pagination {
    margin-top: 20px;
  }
}
</style>